<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        /* 分类1：root、class、#id、# */
        * {
            margin:0px;
            padding:0px;
        }
        /* 匹配html文档 */
        :root{
            background:coral;
        }
        .d1{
            background:red;
        }
        #d2{
            background:blue;
        }

        /* 分类2：标签选择 */
        /* 同一个样式，后面覆盖前面的内容 */
        div{
            font-size: 20px;
        }
        div,i{
            font-size:30px;
        }
        /* div下所有的ul */
        div ul{
            font-style:oblique;
        }
        /* div下的ul，只包括儿子 */
        div>ul{
            font-style:normal;
        }
        /* element+element不用于内部，紧跟的元素 */
        div+i{
            font-style: normal;
        }
        /* 1、p后面所有的ul 2、同一个父元素 */
        p~ul{
            background-color: red;
        }
        div::first-letter{
            font-size: 40px;
            color:brown;

        }
        /* 直接对应的ul的标签 */
        ul::first-line{
            font-size:40px;
        }
        /* 父元素的第一个li，规定了子元素是什么 */
        li:first-child{
            color:chartreuse;
        }
        /* 选择ul 中的每个 <li> 元素并设置其样式 */
        ul:first-child li{
            color: red;
        }
        li:last-child{
            color:crimson;
        }
        div::before{
            content: "插入头部";
        }
        div:after{
            content:"插入尾部";
        }
        /* 第一个div，不一定是父元素中的首个，https://www.cnblogs.com/2050/p/3569509.html */
        div:first-of-type{
            border:2px solid yellow;
        }
        /* 最后一个div */
        div:last-of-type{
            border:2px solid red;
        }
        /* 父元素下的唯一的div */
        div:only-child{
            border:2px solid blue;
        }
        /* 父元素下的全部元素下的第四个div */
        div:nth-child(4){
            font-size: 10px;
        }
        /* 父元素的倒数第二个div */
        div:nth-last-child(2){
            font-size: 40px;
        }
        /* 父元素下的div中第三个元素 */
        div:nth-of-type(3){
            color:darkgreen;
        }
        /* 父元素下的div中的倒数第二个 */
        div:nth-last-of-type(2){
            color:cornflowerblue
        }
        :not(div){
            border:4px solid red;
        }
        /* 被选中的文本 */
        ::selection{
        color:#ff0000;
        }
        /* 火狐被选中的文本 */
        ::-moz-selection{
        color:#ff0000;
        }

        /* 属性选择 */
        [target]{
            font-size:20px;
        }
        [alt=百度链接2]{
            color:blue;
        }
        /* 只能是英文 */
        [alt~=com]{
            font-size:40px;
        }
        [alt|=baidu]{
            font-size:20px;
        }
        [alt^="bai"]{
            color:red;
        }
        [alt$="om"]{
            color:blanchedalmond;
        }
        [alt*="du"]{
            color:aquamarine;
        }
        /* 选择lang属性以en开头的p */
        p:lang(en){
            border: 2px;
        }
        /* 元素无内容 */
        p:empty{
            border:2px solid blue;
            height:20px;
            width:20px;
        }
        /* 选取当前活动的目标元素 */
        :target{
            border: 2px solid #D4D4D4;
            background-color: #e5eecc;
        }
        
        /* 链接、input */
        /* 未被访问的链接 */
        a:link{
            font-style: italic;
        }
        /* 悬浮在其上的链接 */
        a:hover{
            background-color: blue;
        }
        /* 点击时 */
        a:active{
            background-color:aquamarine;
        }
        /* 访问过后 */
        a:visited{
            font-style:normal;
        }
        /* 接收键盘事件或其他用户输入的元素都允许 :focus 选择器。 */
        input:focus{
            background:black;
        }
        input[type="text"]:enabled{ 
            background-color: #ff0000;
        }
        input:enabled{ 
            background-color: #0d8654;
        }
        input:disabled{ 
            background-color: #d8b30f;
        }
        /* 只有Opera 支持 */
        input:checked{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <h1>class、id、*</h1>
    <div class="d1">
        这是div1
    </div>   

    <!-- 同一个id选择器只能用一次,区分大小写 -->
    <div id="d2">
            这是div2
    </div>
    <div id="D2">
            这是DIV2
    </div>
    <br/>
    <h1>标签选择器</h1>
    <i>这是一段斜体字</i>
    <div>
        <ul>
            <li>
                这是li1
            </li>
            <li>
                这是li2
            </li>
            <li>
                <ul>
                    这是ul1
                </ul>
            </li>
        </ul>
    </div>
    <hl>列表1</hl>
    <ul>
       <li>
           牛奶
       </li> 
    </ul>
    <p>列表2</p>
    <ul>
        <li>
            牛奶
        </li>
    </ul>
    <h2>列表3</h2>
    <ul>
        <li>
            牛奶
        </li>
    </ul>
    <br/>
    <h1>属性选择器和link、hover、active、visited、focus</h1>
    <a href="http://www.baidu.com/" alt="百度链接1" target="_blank">这是一个百度链接</a>
    <a href="http://www.baidu.com/" alt="百度链接2" >这是一个百度链接</a>
    <a href="http://www.baidu.com/" alt="baidu com" >这是一个百度链接</a>
    <a href="http://www.baidu.com/" alt="baidu-com" >这是一个百度链接</a> 
    <a href="http://www.baidu.com/" alt="baidu com" >这是一个百度链接</a> 
    <br/>
    <p>在文本框中点击，您会看到黄色的背景：</p>
        <form>
            用户名: <input type="text" name="firstname" /><br/>
            密码: <input type="password" name="pasName" />
            确认密码：<input type="password" disabled="disabled" name="conPassword"/>
            <input type="radio" checked="checked" value="male" name="gender" /> 男
        </form>

    <div>这是diva
        <div>这是diva下的div1</div>
        <div>这是diva下的div2</div>
        <p>这是diva下的p1</p>
        <div>这是diva下的div3</div>
    </div>
    <div>这是divb
        <span>这是divb下的span</span>
        <div>这是divb下的div2</div>
    </div>
    <div>这是divc
        <div>这是divc下的div1</div>
    </div>
    <p></p>
    <h1>这是标题</h1>

    <p><a href="#news1">跳转至内容 1</a></p>
    <p><a href="#news2">跳转至内容 2</a></p>
    <p id="news1"><b>内容 1...</b></p>
    <p id="news2"><b>内容 2...</b></p>
</body>
</html>